<template>
  <div class="contrain">
    <div class="myself">
      <div class="islogin"
           v-if="$store.state.User.LoginStatus">
        <van-notice-bar v-if="!$store.state.User.user.email"
                        mode="link"
                        @click="modify">建议绑定邮箱提升安全性</van-notice-bar>
        <div class="main">

          <img v-if="$store.state.User.user.icon"
               :src="$upload+$store.state.User.user.icon">
          <img v-else
               src="../../assets/undefined.jpg">
          <div class="message">
            <span>{{ $store.state.User.user.nickname }}</span>
            <span>ID:{{ $store.state.User.user.uid }}</span>
          </div>
        </div>
      </div>
      <div class="nologin"
           v-else
           @click="toLogin">
        <img src="../../assets/undefined.jpg">
        <span>登陆后发帖评论畅所欲言</span>
      </div>
    </div>
    <div class="nav">
      <van-grid :column-num="3">
        <van-grid-item icon="todo-list"
                       text="我的帖子"
                       @click="goSend" />
        <van-grid-item icon="star"
                       text="我的点赞"
                       @click="goStar" />
        <van-grid-item icon="like"
                       text="我的收藏"
                       @click="goLike" />
      </van-grid>
    </div>
    <div class="operate"
         v-if="$store.state.User.LoginStatus">
      <span @click="modify">
        <van-icon name="edit" />修改资料
      </span>
      <span @click="resetPwd">
        <van-icon name="lock" />修改密码
      </span>
      <span @click="feedBack">
        <van-icon name="phone-o" />投诉反馈
      </span>
      <span @click="logout">
        <van-icon name="revoke" />退出登录
      </span>
    </div>
    <van-popup v-model="isEject"
               round
               position="bottom">
      <h1>重置密码</h1>
      <van-form @failed="onFailed">
        <van-field v-model="userInfo.old_pwd"
                   label="原密码"
                   placeholder="请输入原密码"
                   :rules="[{validator}]" />
        <van-field v-model="userInfo.new_pwd"
                   label="新密码"
                   type="password"
                   placeholder="请输入新密码"
                   :rules="[{validator}]" />
        <van-field v-model.lazy="userInfo.confirm_pwd"
                   label="确认密码"
                   type="password"
                   placeholder="请确认新密码"
                   :rules="[{validator}]" />
        <div style="margin: 16px;">
          <van-button round
                      block
                      type="info"
                      @click="submitReset">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-dialog v-model="show"
                title="投诉反馈"
                show-cancel-button
                @confirm="close">
      <van-field rows="2"
                 type="textarea"
                 autofocus
                 autosize
                 placeholder="请输入反馈内容" />
    </van-dialog>
  </div>
</template>
<script>
import { resetPwd } from '@/api/myself'
export default {
  data () {
    return {
      show: false,
      isEject: false,
      userInfo: {
        old_pwd: '',
        new_pwd: '',
        confirm_pwd: ''
      }
    }
  },
  methods: {
    toLogin () {
      this.$router.push('/login')
    },
    logout () {
      this.$dialog.confirm({
        message: '是否退出登录'
      }).then(() => {
        this.$store.commit('removeUser')
      })
    },
    feedBack () {
      this.show = !this.show
    },
    close () {
      this.$toast.success('感谢您的反馈，致力为您打造更满意的服务')
    },
    async submitReset () {
      if (this.userInfo.new_pwd !== this.userInfo.confirm_pwd) {
        return this.$toast.fail('两次密码输入不一致')
      }
      resetPwd(this.userInfo.old_pwd, this.userInfo.new_pwd, this.$store.state.User.user._id).then(() => {
        this.$toast.success('修改成功，请重新登录')
        this.isEject = !this.isEject
        setTimeout(() => {
          this.$store.commit('removeUser')
        }, 1000)
      })
    },
    validator (value) {
      return !!value
    },
    modify () {
      this.$router.push(`/modify/${this.$store.state.User.user._id}`)
    },
    resetPwd () {
      this.isEject = !this.isEject
    },
    goSend () {
      return this.$store.state.User.LoginStatus ? this.$router.push('/send') : this.$toast.fail('请先登录')
    },
    goStar () {
      return this.$store.state.User.LoginStatus ? this.$router.push('/star') : this.$toast.fail('请先登录')
    },
    goLike () {
      return this.$store.state.User.LoginStatus ? this.$router.push('/like') : this.$toast.fail('请先登录')
    },
    onFailed () {
      this.$toast.fail('请正确输入所有信息')
    }
  }
}
</script>

<style lang="less" scoped>
.contrain {
  background-color: #ededed;
  padding: 10px 10px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  .myself {
    display: flex;
    height: 250px;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    .islogin {
      display: flex;
      flex-direction: column;
      .main {
        margin-top: 50px;
        display: flex;
        align-items: center;
        img {
          border-radius: 50%;
        }
      }
    }
    .nologin {
      align-self: center;
      display: flex;
      align-items: center;
      img {
        border-radius: 50%;
      }
      span {
        margin-left: 10px;
        font-size: 16px;
      }
    }

    img {
      width: 100px;
      height: 100px;
    }
    .message {
      display: flex;
      flex-direction: column;
      margin-left: 30px;
      span:nth-child(1) {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 26px;
      }
      span:nth-child(2) {
        font-size: 18px;
      }
    }
  }
  .operate {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    span {
      border-radius: 15px;
      padding: 0 30px;
      background-color: #fff;
      margin-top: 10px;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      .van-icon {
        margin-right: 10px;
      }
    }
  }
  .nav {
    margin-top: 10px;
  }
  .van-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    .van-form {
      margin-top: 10px;
    }
  }
}
</style>
